<!--询比价管理页面-->
<template>
  <div>
    <table-ext :columns="columns" :searchForm="searchForm" :config="config" ref="tableExt" >
      <template slot="table-action">
        <el-button type="info" @click="addTemplate">新增</el-button>
      </template>
    </table-ext>
    <!-- 新增&修改弹框 -->
    <el-dialog :title="dialogUpdate?'修改':'新增' + config.title" :visible.sync="dialogFormVisible">
      <el-form :model="templateForm" :rules="rules" label-width="100px">
        <el-form-item label="模板ID:" prop="id" style="margin-bottom: 22px" v-if="false">
          <el-input v-model="templateForm.id"></el-input>
        </el-form-item>
        <el-form-item label="模板名称:" prop="templateName" style="margin-bottom: 22px">
          <el-input v-model="templateForm.templateName"></el-input>
        </el-form-item>
        <el-form-item label="模板类型:" prop="templateType">
          <el-select v-model="templateForm.templateType" placeholder="请选择">
            <el-option v-for="item in templateTypes" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="模板内容:" prop="templateContent">
          <el-input type="textarea" v-model="templateForm.templateContent" :autosize="{ minRows: 2, maxRows: 16}" maxlength='20000'></el-input>
          <a href="javascript:;" @click='downloadFiles("/usr/srm/templates/","rfqTemplate.xml")' class="download_color">询价模板下载</a>
        </el-form-item>
        <el-form-item label="备注:" prop="remark" style="margin-bottom: 22px">
          <el-input v-model="templateForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('templateForm'); dialogFormVisible = false">取 消</el-button>
        <el-button type="info" @click="resetForm('templateForm')"  v-if="!dialogUpdate">重置</el-button>
        <el-button type="primary" @click="save(templateForm)">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import TableExt from '@/components/common/table-ext/table-ext.vue';
  import SelectTable from '@/components/common/select-ext/select-table';
  import TableIcon from '@/components/common/table-ext/table-icon';
  import qs from 'qs';
  export default {
    // 引入自定义表格组件
    components: {
      'table-ext': TableExt,
      SelectTable
    },
    data() {
      return {
        // 弹框显示控制
        dialogFormVisible: false,
        // 新增|修改弹框控制
        dialogUpdate: false,
        templateForm:{
          id:null,
          templateName:null,
          templateType:null,
          templateContent:null,
          remark:null,
        },
        templateTypes:[{
          id:3,
          name:'明细报价'
        }],
        // 验证规则
        rules: {
          templateName: [
            { required: true, message: '请输入模板名称', trigger: 'blur' }
          ],
          templateContent: [
            { required: true, message: '请输入模板内容', trigger: 'change' }
          ],
          templateType: [
            { required: true, message: '请选择模板类型', trigger: 'blur' }
          ]
        },
        config: { // 页面共通配置
          title: '询价模板', //页面标题
          isPage: true, //是否分页
          isNo: true, //是否显示序号
          selection: true, //是否显示复选框
          crudMapping: { // CRUD方法
            query: {
              url: this.lib.config.host.rfq + '/ctmgt/rfq/template/query'
            }
          }
        },
        // 查询表单配置
        searchForm: [
          {
            label: '模板编码:',
            key: 'templateCode',
            type: 'input'
          },{
            label: '模板名称：',
            key: 'templateName',
            type: 'input'
          }],
        // 表格列定义
        columns: [
        {
          width: '150px',
          label: '操作', // 表格header
          align:'center',
          render:(createElement, params)=>{ // 动态渲染，click事件示例
          let _this = this;
          return createElement('div', {}, 
            [createElement('el-button', {
                props: {
                  type: 'text',
                },
                on: {
                  click:() =>{
                    _this.dialogUpdate = true;
                    _this.dialogFormVisible = true;
                    this.$nextTick(()=>{
                      //_this.resetForm('templateForm');
                      _this.templateForm = Object.assign({}, _this.templateForm, params.row);
                    }) 
                  }
                }
            }, '编辑'),
            // createElement('el-button', {
            //     props: {
            //       type: 'text',
            //     },
            //     on: {
            //       click:() =>{
            //           this.openCloseDialog(params.row.id);
            //       }
            //     }
            //   }, '预览'),
            ]);
          }
        },{
          label: '模板编码',
          key: 'templateCode',
          width: '200px',
          align: 'center'
        },{
          label: '模板名称',
          key: 'templateName',
          width: "300px",
          align: 'center'
        },{
          label: '模板类型',
          key: 'templateType',
          width: "150px",
          align: 'center',
          render:(createElement, params)=>{ //动态渲染, 字典表示例
            if(params.row.templateType == '1'){
              return createElement('div','报单价');
            } else if(params.row.templateType == '2'){
              return createElement('div','分项报价');
            } else if(params.row.templateType == '3'){
              return createElement('div','明细报价');
            } else if(params.row.templateType == '4'){
              return createElement('div','含BOM报价');
            } else {
               return createElement('div','--');
            }
          }
        },{
          label: '备注',
          key: 'remark',
          width: "auto",
          align: 'center'
        }]
      }
    },
    mounted() {

    },
    methods: {
      // 新增模板
      addTemplate(){
        this.dialogFormVisible = true;
        this.$nextTick(()=>{
          this.resetForm('templateForm');
        });
      },
      //跳到详情
      detailTo(id) {
        this.$router.push({
          path: '/Index/Rfq/EnquirySteps',
          query: {
            id: id,
            step: 1
          }
        })
      },
      save(templateForm) {
        this.axios.post(this.lib.config.host.rfq + '/ctmgt/rfq/template/addOrUpdate', templateForm)
          .then((response)=>{
            this.dialogFormVisible = false;
            this.$refs['tableExt'].refreshTable();
          })
          .catch((error)=>{
            console.log(error);
          });
      },
      // 下载附件
      downloadFiles(filePath,fileName){
        this.downloadFile(filePath, fileName);
      }
    }
  }
</script>
